import 'package:day3pm/static.dart';
import 'package:flutter/material.dart';

class SkillsPage extends StatefulWidget {
  const SkillsPage({super.key});

  @override
  State<SkillsPage> createState() => _SkillsPageState();
}

class _SkillsPageState extends State<SkillsPage> {
  late int _selectIndex = 0;
  late PageController _controller =
      PageController(initialPage: _selectIndex, viewportFraction: 0.9);

  void nextPage() {
    _controller.nextPage(
        duration: Duration(milliseconds: 600), curve: Curves.linear);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child: Column(
          children: [
            Container(
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text(
                            'Skills',
                            style: TextStyle(
                                fontSize: 24, fontWeight: FontWeight.w800),
                          ),
                        ),
                        Divider(
                          endIndent: 980,
                          thickness: 3.5,
                          color: Colors.pink[50],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: LayoutBuilder(builder: (BuildContext, BoxConstraints) {
                var h = BoxConstraints.maxHeight;

                return Column(
                  children: [
                    Expanded(
                      child: PageView.builder(
                        controller: _controller,
                        itemCount: skillsList.length,
                        itemBuilder: (context, index) {
                          return ImageContainer(
                            title: skillsList[index]['title'],
                            image: skillsList[index]['image'],
                            desc: skillsList[index]['desc'],
                          );
                        },
                        onPageChanged: (_v) {
                          setState(() {
                            _selectIndex = _v;
                          });
                        },
                      ),
                    ),
                    Container(
                      height: 100,
                      width: 240,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            width: 40,
                            height: 40,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(25)),
                              border: Border.all(width: 1, color: _selectIndex == 0 ? Color(0xFFFBE4EC) : Color(0xFFDB106B))
                            ),
                            child: IconButton(
                                onPressed: _selectIndex == 0
                                    ? null
                                    : () {
                                  _controller.previousPage(duration: Duration(milliseconds: 300), curve: Curves.linear);
                                },
                                icon: Icon(
                                  Icons.keyboard_arrow_left_rounded,
                                  size: 20,
                                  color: _selectIndex == 0 ? Color(0xFFFBE4EC) : Color(0xFFDB106B),
                                )),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: skillsList
                                .asMap()
                                .map((i, v) => MapEntry(
                                i,
                                Container(
                                  width: 15.0,
                                  height: 15.0,
                                  margin: const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: ShapeDecoration(
                                    color: _selectIndex == i ? const Color(0xFFDB106B) : const Color(0xFFFBE4EC),
                                    shape: CircleBorder(),
                                  ),
                                )))
                                .values
                                .toList(),
                          ),
                          Container(
                            width: 40,
                            height: 40,
                            decoration: BoxDecoration(
                                borderRadius: const BorderRadius.all(Radius.circular(25)),
                                border: Border.all(width: 1, color: _selectIndex == skillsList.length - 1 ? const Color(0xFFFBE4EC) : const Color(0xFFDB106B))
                            ),
                            child: IconButton(
                                onPressed: _selectIndex == skillsList.length - 1
                                    ? null
                                    : () {
                                  _controller.nextPage(duration: const Duration(milliseconds: 300), curve: Curves.linear);
                                },
                                icon: Icon(
                                  Icons.keyboard_arrow_right_rounded,
                                  size: 20,
                                  color: _selectIndex == skillsList.length - 1 ? const Color(0xFFFBE4EC) : const Color(0xFFDB106B),
                                )),
                          ),
                        ],
                      ),
                    ),
                  ],
                );
              }),
            )
          ],
        ),
      ),
    );
  }
}

class ImageContainer extends StatelessWidget {
  const ImageContainer(
      {Key? key, required this.title, required this.image, required this.desc})
      : super(key: key);

  final String title;
  final String image;
  final String desc;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16),
      child: LayoutBuilder(builder: (context, box) {
        var w = box.maxWidth;
        var h = box.maxHeight;
        return Stack(
          fit: StackFit.expand,
          children: [
            Image.asset(
              image,
              fit: BoxFit.cover,
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Card(
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 10,vertical: 20),
                  width: w / 2,
                  height: h / 2.5,
                  color: Color(0xFFD51068),
                  child: ListTile(
                    subtitle: Text(
                      desc,
                      style: TextStyle(overflow: TextOverflow.ellipsis,color: Colors.white,fontSize: 18),
                      maxLines: 5,
                    ),
                    title: Text(
                      title,
                      style: TextStyle(
                        fontSize: 26,
                        color: Colors.white,
                        fontWeight: FontWeight.w800
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      }),
    );
  }
}
